
// import { Flex, message } from "antd"
import CardNormal from "../../component/card/card"
import styles from "./dataManagement.module.css"
import { message, Modal } from "antd"
import { PlusCircleOutlined } from '@ant-design/icons'
import { useState } from "react"
const propsCardData = [
  {id: 0, title: 'I am Jack', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1', message: 'Here is the message from Jack!'},
  {id: 1, title: 'I am Frank', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2', message: 'Here is the message from Frank!'},
  {id: 2, title: 'I am Peter', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3', message: 'Here is the message from Peter!'},
  {id: 3, title: 'I am Martain', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=4', message: 'Here is the message from Martain!'},
  {id: 4, title: 'I am Lewis', avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=5', message: 'Here is the message from Lewis!'}
]

const propsCardDataDetail = [
  {
    id: 0,
    title: 'I am Jack', // 姓名标识
    avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=1', // 头像
    message: 'Here is the message from Jack!', // 个人留言
    position: 'Frontend Engineer', // 职业
    contactEmail: 'jack.work@example.com', // 联系邮箱
    skills: ['React', 'TypeScript', 'Tailwind CSS', 'Webpack'], // 核心技能栈（数组形式，便于渲染标签）
    joinedDate: '2022-03', // 入职/入行时间（增加真实感）
    currentProject: '企业级后台管理系统重构', // 当前负责项目（关联实际工作）
    hobbies: ['周末骑行', '独立游戏开发', '手冲咖啡'], // 兴趣爱好（非通用“看书旅游”）
    personalTag: '代码洁癖患者 | 深夜Debug选手', // 自我标签（带梗，有记忆点）
    motto: '写可维护的代码，过不将就的生活', // 个人座右铭
    favoriteTool: 'VS Code + 100+插件（重度配置党）' // 常用工具（体现工作习惯）
  },
  {
    id: 1,
    title: 'I am Frank',
    avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=2',
    message: 'Here is the message from Frank!',
    position: 'UI/UX Designer',
    contactEmail: 'frank.design@example.com',
    skills: ['Figma', 'Adobe XD', '交互原型', '用户访谈', '动效设计'],
    joinedDate: '2021-09',
    currentProject: 'C端社交APP改版（聚焦Z世代用户）',
    hobbies: ['胶片摄影', '独立书店探店', '复古海报收藏'],
    personalTag: '像素眼 | 拒绝“为设计而设计”',
    motto: '好设计藏在用户没说出口的需求里',
    favoriteTool: 'Figma（组件库狂魔）+ Procreate（随手画灵感）'
  },
  {
    id: 2,
    title: 'I am Peter',
    avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=3',
    message: 'Here is the message from Peter!',
    position: 'Product Manager',
    contactEmail: 'peter.product@example.com',
    skills: ['需求拆解', 'PRD撰写', '用户画像', '数据分析', '跨部门协调'],
    joinedDate: '2020-11',
    currentProject: 'SaaS工具类产品从0到1冷启动',
    hobbies: ['行业报告拆解', '桌游组织', '城市探店测评'],
    personalTag: '需求翻译官 | 不画饼的PM',
    motto: '用产品思维解决问题，用同理心理解用户',
    favoriteTool: 'Notion（全流程管理）+ Tableau（快速看数）'
  },
  {
    id: 3,
    title: 'I am Martain',
    avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=4',
    message: 'Here is the message from Martain!',
    position: 'Senior Data Analyst',
    contactEmail: 'martain.data@example.com',
    skills: ['SQL', 'Python（Pandas/Numpy）', '数据可视化', 'A/B测试', '用户增长模型'],
    joinedDate: '2019-06',
    currentProject: '用户留存率提升数据看板搭建',
    hobbies: ['数据故事写作', '开源数据集整理', '骑行打卡'],
    personalTag: '数据驱动信徒 | 拒绝“数据美化”',
    motto: '数据是沉默的语言，分析是让它说话的艺术',
    favoriteTool: 'Jupyter Notebook + Power BI（可视化天花板）'
  },
  {
    id: 4,
    title: 'I am Lewis',
    avatar: 'https://api.dicebear.com/7.x/miniavs/svg?seed=5',
    message: 'Here is the message from Lewis!',
    position: 'Backend Developer',
    contactEmail: 'lewis.backend@example.com',
    skills: ['Java', 'Spring Boot', 'MySQL', 'Redis', '微服务架构'],
    joinedDate: '2021-01',
    currentProject: '高并发订单系统稳定性优化',
    hobbies: ['服务器装机', '开源项目贡献', '美式足球观赛'],
    personalTag: '性能优化怪 | 日志狂魔',
    motto: '后端是系统的基石，稳定比花哨更重要',
    favoriteTool: 'IntelliJ IDEA + Postman（接口调试神器）'
  }
];
const titleBox = (title, subTitle, func) => {
  return (
    <div className={styles.titleBox}>
      <div style={{display: 'flex', flexDirection: 'row'}}>
        <div className={styles.title}>{title}</div>
        <div className={styles.subTitle}>{subTitle}</div>
      </div>
      <div className={styles.buttonCard}>
        <PlusCircleOutlined onClick={() => func(true)} />
      </div>
    </div>
  )
}

const DataManagement = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [open, setOpen] = useState(false);
  const [personDetail, setPersonDetail] = useState(propsCardDataDetail[0]);
  const successMsgOpen = (content) => {
    messageApi.open({
      type: 'success',
      content: content,
    });
  };
//   const showModal = () => {
//       setOpen(true);
//       successMsgOpen('Added successfully')
//   };

  const handleModelOpen = (model) => {
    setOpen(model)
  }
  const handleOk = e => {
    console.log(e);
    setOpen(false);
  };
  const handleCancel = e => {
    console.log(e);
    setOpen(false);
  };
  const handleCardClick = (id) => {
    setPersonDetail(propsCardDataDetail[id]);
  }

  return (
    <>
      <div className={styles.backgroundCard}>
        {contextHolder}
        {titleBox('人员', 'Chose to manage', handleModelOpen)}
        <div className={styles.cardArea}>
          {/**onClick={() => handleCardClick(item.id)} */}
          {propsCardData.map((item) => (
            <CardNormal key={item.id} data={item} beClicked={handleCardClick} />
          ))}
        </div>
        <Modal
          title="添加"
          open={open}
          onOk={handleOk}
          onCancel={handleCancel}
          okButtonProps={{ disabled: true }}
          cancelButtonProps={{ disabled: true }}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
      <div className={styles.backgroundCard}>
        {titleBox('数据', 'Chose to manage')}
        <CardNormal
          key={personDetail.id}
          data={{
            id: personDetail.id,
            title: personDetail.title,
            avatar: personDetail.avatar,
            message: personDetail.message
          }}
        />
      </div>
    </>
  )
}

export default DataManagement